<template>
	<view class="container">
		<custom-nav-search :keyword="keyword"></custom-nav-search>
		<!-- <view class="serch-box">
			<view>
				<u-icon name="close" @click="goback"></u-icon>
			</view>
			<view>
				<u-search placeholder="请输入搜索的关键字" v-model="keyword" @custom="searchInfo"></u-search>
			</view>
		</view>
		<view class="rece-box">
			<view class="title-box">
				<text>最近搜索</text>
				<view>
					<u-icon name="trash" size="25" @click="clear"></u-icon>
				</view>
			</view>
			<view class="rece-main">
				<view class="rece-item" v-for="(item,index) in receList" :key="index">{{item}}</view>
			</view>
		</view> -->
		<view class="hot-box">
			<view class="title-box">
				<text>热门搜索</text>
			</view>
			<view class="hot-main">
				<view class="hot-item" v-for="(item,index) in hotwordsList" :key="index" @click="search(item.title)">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotwordsList:[],
				receList:JSON.parse(uni.getStorageSync("rectList")||'[]'),
				keyword:''
			}
		},
		methods: {
			async getHotwords(){
				const result=await uni.$api.home.getHotwordsaApi()
			    this.hotwordsList=result.data.data
			},
			search(info){
				const isExits=this.receList.includes(info)
			    if(!isExits){
					this.receList.push(info)
				}
				//使用uni.setStorageSync保存数据到本地存储
				uni.setStorageSync("rectList",JSON.stringify(this.receList))
				//将info的值，赋值给keyword
				this.keyword=info;
			},
			clear(){
				uni.showModal({
					title:'提示',
					content:'您确定要删除吗?',
					success:(res)=>{
						if(res.confirm){
							uni.removeStorageSync('rectList')
							this.receList=[]
						}
					}
				})
			},
			searchInfo(){
				const rectList=JSON.parse(uni.getStorageSync("rectList")||'[]') 
				const isExits=rectList.includes(this.keyword)
				if(!isExits){
					rectList.push(this.keyword)
				}
				uni.setStorageSync("rectList",JSON.stringify(rectList))
				uni.navigateTo({
					url:'/pages/productlist/productlist?keyword='+this.keyword
				})
			},
			goback(){
				uni.navigateBack()
			}
		},
		onLoad() {
			this.getHotwords()
		}
	}
</script>

<style lang="scss">
	.container{
		.serch-box{
			width:750rpx;
			height: 100rpx;
			background-color: yellow;
			@include flex-box(start,center,row)
		}
		.hot-box{
			
			.hot-main{
				@include flex-box(between,start,row)
				flex-wrap: wrap;
				.hot-item{
					margin: 20rpx;
					@include flex-box(center,center,row)
					width: 180rpx;
					height: 60rpx;
					border:1rpx solid #ccc;
					border-radius: 30rpx;
				}
			}
		}
		.rece-box{
			.title-box{
				@include flex-box(between,start,row)
				padding: 5rpx 20rpx;
			}
			.rece-main{
				@include flex-box(start,start,row)
				flex-wrap: wrap;
				.rece-item{
					margin: 20rpx;
					@include flex-box(center,center,row)
					width: 180rpx;
					height: 60rpx;
					border:1rpx solid #ccc;
					border-radius: 30rpx;
				}
			}
		}
	}
</style>
